<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.active{
			background: orange;
		}
	</style>
</head>
<body>
	<p >段落一</p>
	<p >段落二</p>
	<p >段落三</p>

	<script type="text/javascript">
		let p = document.querySelectorAll('p')

		// p.onlick
		for (let i = 0; i < p.length; i++) {
			// 每一个p绑定点击事件
			p[i].onclick = function(){
				console.log(i)
				// 每次加类名之前， 先清除上一次的active
				if (document.querySelector(".active")) {
					document.querySelector(".active").className = ""
					p[i].className = "active"	
				}else{
					this.className = "active"	

				}
				
			}
		}
	</script>
</body>
</html>